<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                template="/templates/plantilla1.xhtml">

    <ui:define name="contenido">

        <h:form>
            <h2>Ejercicio 5 - Página 2</h2>
            
            <h:panelGroup rendered="#{ejercicio5Pag2Bean.persona.rut == null}">
                <h2>Crear Persona</h2>
            </h:panelGroup>
            <h:panelGroup rendered="#{ejercicio5Pag2Bean.persona.rut != null}">
                <h2>Editar Persona</h2>
            </h:panelGroup>
            
            <table>
                <tr>
                    <th>* Rut</th>
                    <td>
                        <h:inputText id="rut" value="#{ejercicio5Pag2Bean.persona.rut}" 
                                     required="true" converter="rutConverter" />
                    </td>
                    <td>
                        <p:message for="rut" />
                    </td>
                </tr>
                <tr>
                    <th>* Nombre:</th>
                    <td>
                        <h:inputText id="nombre" value="#{ejercicio5Pag2Bean.persona.nombre}"
                                     required="true" >
                            <f:validateLength maximum="10" />
                        </h:inputText>
                    </td>
                    <td>
                        <p:message for="nombre" />
                    </td>
                </tr>
                <tr>
                    <th>Fecha Nacimiento:</th>
                    <td>
                        <p:calendar id="fecha" value="#{ejercicio5Pag2Bean.persona.fechaNacimiento}" readonlyInput="true"
                                    navigator="true" pattern="dd/MM/yyyy" yearRange="c-100:c+0" showOn="button" />
                    </td>
                    <td>
                        <p:message for="fecha" />
                    </td>
                </tr>
                <tr>
                    <th>Email:</th>
                    <td>
                        <h:inputText id="email" value="#{ejercicio5Pag2Bean.persona.email}" />
                    </td>
                    <td>
                        <p:message for="email" />
                    </td>
                </tr>
            </table>

            <h:commandButton value="Eliminar" action="#{ejercicio5Pag2Bean.eliminar()}" />
            <br/>
            <h:commandButton value="Guardar" action="#{ejercicio5Pag2Bean.guardar()}" />
            <br/>
            <h:commandButton value="Guardar Y Volver" action="#{ejercicio5Pag2Bean.guardarYVolver()}" />
            <br/>
            <h:commandButton value="Volver" action="#{ejercicio5Pag2Bean.volver()}" immediate="true" />
            
        </h:form>
        

    </ui:define>
</ui:composition>